<template>
  <div class="g-dialog-panel deposit">
    <div class="g-dialog-title">
      <span>Deposit</span>
      <div class="g-clickable close" @click="close">
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <div class="deposit__content">
      <div class="tip">
        <p>
          Please note that tokenswap is a non-custodial exchange protocal, only
          the wallet havs access to the exchange account ,which means you should
          be responsible for your wallet security. You can withdrwal the
          unfrozen cryptocurrency anytime.
        </p>
      </div>
      <div class="field">
        <span>Amount</span>
        <div>
          <input type="text" value="0.00" />
        </div>
        <span class="unit">USDT</span>
      </div>
      <div class="label">
        <span>Balance</span>
        <span>0 USDT</span>
      </div>
      <div class="button g-clickable confirm">
        <span>Confirm</span>
      </div>
      <div class="button g-clickable cancel" @click="close">
        <span>Cancel</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.deposit {
  &__content {
    .tip {
      margin: 20px 0 15px;
      padding: 10px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.03);

      p {
        line-height: 1.6;
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
    }

    .field {
      height: 45px;
      display: grid;
      align-items: center;
      padding: 10px 15px;
      border-radius: 5px;
      box-sizing: border-box;
      grid-template-columns: 50px 1fr 50px;
      background-color: var(--border-color);

      span {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);

        &.unit {
          text-align: right;
        }
      }

      input {
        background: none;
        border: none;
        outline: none;
        width: 210px;
        text-align: right;
        font-size: 12px;
        font-family: "Roboto Medium";
        color: var(--color);
      }
    }

    .label {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      span {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
    }

    .button {
      cursor: pointer;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 14px;
        font-family: "Roboto Medium";
        color: var(--color);
      }

      &.confirm {
        border-radius: 5px;
        background-color: var(--color-green);
      }

      &.cancel {
        span {
          color: var(--color-content);
        }
      }
    }
  }
}
</style>
